// 主题颜色
$color-1: #3b9a9c;
$color-2: #4bc2c5;
$color-3: #78fee0;
$color-4: #fef4a9;
$color-list: $color-1, $color-2, $color-3, $color-4;
$for_start: 1;
$for_end: 4;

// 字体颜色 背景颜色
.main-color-1 { color: $color-1; }
.main-color-2 { color: $color-2; }
.main-color-3 { color: $color-3; }
.main-color-4 { color: $color-4; }
.main-bg-1 { background-color: $color-1; }
.main-bg-2 { background-color: $color-2; }
.main-bg-3 { background-color: $color-3; }
.main-bg-4 { background-color: $color-4; }

// 按钮主题
@mixin main-button($i, $bg: false) {
    $i:nth($color-list, $i);
    color: $i;
    border-color: $i;
    @if $bg {
        background-color: $i !important;
        color: white;
    }
}

// 内外边距
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
@for $i from 1 through 4 {
    .p-#{$i} { padding: $i * 10 + px; }
    .pt-#{$i} { padding-top: $i * 10 + px; }
    .pr-#{$i} { padding-right: $i * 10 + px; }
    .pb-#{$i} { padding-bottom: $i * 10 + px; }
    .pl-#{$i} { padding-left: $i * 10 + px; }
    .m-#{$i} { margin: $i * 10 + px; }
    .mt-#{$i} { margin-top: $i * 10 + px; }
    .mr-#{$i} { margin-right: $i * 10 + px; }
    .mb-#{$i} { margin-bottom: $i * 10 + px; }
    .ml-#{$i} { margin-left: $i * 10 + px; }
}

// 特效 -----------------------------------
// 四个角生成三角形
@mixin triangle($flag: 1, $c: black) {
    position: relative;
    &::before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-width: 20px;
        border-color: $c;
        border-style: solid;
        @if $flag == 1 {
            top: 0;
            left: 0;
            border-right-width: 0;
            border-top-width: 0;
            border-bottom-color: transparent;
        }
        @if $flag == 2 {
            top: 0;
            right: 0;
            border-top-width: 0;
            border-left-width: 0;
            border-bottom-color: transparent;
        }
        @if $flag == 3 {
            left: 0;
            bottom: 0;
            border-bottom-width: 0;
            border-right-width: 0;
            border-top-color: transparent;
        }
        @if $flag == 4 {
            right: 0;
            bottom: 0;
            border-left-width: 0;
            border-bottom-width: 0;
            border-top-color: transparent;
        }
    }
}


// 其他 -----------------------------------
// 单行溢出省略
.text-ell {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
// 多行溢出省略
@mixin text-ell($num: 2) {
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $num;
    -moz-box-orient: vertical;
    -moz-line-clamp: $num;
    overflow: hidden;
}